<template>
  <div class="Search_body">
    <el-breadcrumb separator=">" class="breadcrumb"
      ><!-- 面包屑 -->
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>全部结果</el-breadcrumb-item>
      <el-breadcrumb-item>手机</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="search-filter">
      <div class="filter-wrap">
        <div class="filter-list">
          <ul>
            <span>分类：</span>
            <li><a href="#">全部</a></li>
            <li>红米手机</li>
            <li>小米手机</li>
            <li>黑鲨手机</li>
          </ul>
          <ul>
            <span>拍照像素：</span>
            <li>四摄像头</li>
            <li>三摄像头</li>
            <li>双摄像头</li>
            <li>高清摄像头</li>
          </ul>
          <ul>
            <span>屏幕大小：</span>
            <li>超大屏</li>
          </ul>
          <ul>
            <span>运行内存：</span>
            <li>极速畅玩</li>
            <li>高速</li>
            <li>实用</li>
          </ul>
          <ul>
            <span>电池续航：</span>
            <li>超长待机</li>
          </ul>
          <ul>
            <span>高级选项：</span>
            <li>cpu型号</li>
            <li>高速</li>
            <li>实用</li>
          </ul>
        </div>
      </div>
      <!-- 分类 -->
    </div>
    <div class="Search_main">
      <!-- 主体 -->
      <div class="Search_complex">
        <!-- 销量价格等等的选项区域 -->
        <ul class="complex_left">
          <!-- 左边的 -->
          <li>综合</li>
          <li>新品</li>
          <li>销量</li>
          <li @click="handleSort">
            价格
            <span
              class="iconfont"
              :class="isSort ? 'icon-shuzhixiajiang' : 'icon-shuzhishangsheng'"
            >
            </span>
          </li>
          <!-- <li>价格<span class="iconfont icon-shuzhishangsheng"></span></li> -->
        </ul>
        <ul class="complex_right">
          <!-- 右边的 -->
          <li>收货地</li>
          <li>
            <el-checkbox v-model="checked">促销</el-checkbox>
          </li>
          <li>
            <el-checkbox v-model="checked">分期</el-checkbox>
          </li>
          <li>
            <el-checkbox v-model="checked">仅看有货</el-checkbox>
          </li>
        </ul>
      </div>
      <div class="Search_item">
        <!-- 中心卡片位置 -->
        <!-- <router-link to="/detail">
          <el-card class="box-card" shadow="hover">
            <div class="card_img">
              <img src="./sj.jpg" alt="手机" />
              <h2>Redmi Note 11 Pro 6GB+128GB</h2>
            </div>
            <p>1799元</p>
            <div class="card_Thumbnail">
              <ul>
                <li><img src="./sj.jpg" alt="#" /></li>
                <li><img src="./sj.jpg" alt="#" /></li>
                <li><img src="./sj.jpg" alt="#" /></li>
              </ul>
            </div>
          </el-card>
        </router-link> -->

        <el-card
          class="box-card"
          shadow="hover"
          v-for="goods in goodsList"
          :key="goods.product_id"
          @click.native="toDeatail(goods.product_id)"
        >
          <div class="card_img">
            <img :src="goods.images[0]" alt="手机" />
            <h2>{{ goods.name }}</h2>
          </div>
          <p>{{ goods.price_max }}元</p>
          <div class="card_Thumbnail">
            <ul>
              <li><img :src="goods.images[0]" /></li>
            </ul>
          </div>
        </el-card>
        <div class="Search_Pagina">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="8"
            layout="prev, pager, next, jumper,total,sizes"
            :total="total"
          >
            >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="Search_Guess">
      <div class="Search_Guess_title"><h2>猜你喜欢</h2></div>
      <template>
        <el-carousel
          indicator-position="outside"
          class="el-carousel"
          arrow="never"
        >
          <el-carousel-item class="Search_Carousel">
            <ul class="Search_Carousel_card">
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
            </ul>
          </el-carousel-item>
          <el-carousel-item class="Search_Carousel">
            <ul class="Search_Carousel_card">
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
              <li class="Carousel_card_item">
                <img src="./1.webp" alt="手机" />
                <div class="card_item_title">米家电动剃须刀</div>
                <div class="card_item_money">1399元</div>
                <div class="card_item_Praise">5.3万人好评</div>
              </li>
            </ul>
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
  </div>
</template>

<script>
import { reqGetGoodsList } from "@/api/search"
export default {
  data() {
    return {
      checked: false,
      goodsList: [],
      isSort: true,
      currentPage: 1,
      total: 16,
    }
  },
  methods: {
    async getGoodsList() {
      const { keyword } = this.$route.params
      console.log(keyword)
      const res = await reqGetGoodsList(keyword)
      // console.log(res)
      this.goodsList = res
    },
    // 跳转到详情页面
    toDeatail(id) {
      console.log(1111)
      this.$router.push({
        name: "Detail",
        query: {
          id,
        },
      })
    },
    // 处理降序还是升序
    handleSort() {
      this.isSort = !this.isSort
      // 然后我们需要 根据他的标识 去判断 到底是升序 还是降序
      if (!this.isSort) {
        //让数据升序排序
        this.goodsList.sort((a, b) => {
          return a.price_max - b.price_max
        })
      } else {
        this.goodsList.sort((a, b) => {
          return b.price_max - a.price_max
        })
      }
    },
    // 修改每页条数发生的变化
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 修改当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
  async mounted() {
    await this.getGoodsList()
    this.goodsList.sort((a, b) => {
      return b.price_max - a.price_max
    })
  },
  watch: {
    $route() {
      this.getGoodsList()
    },
  },
}
</script>
<style lang="less" scoped>
.Search_body {
  width: 1200px;
  margin: 0 auto;
  .breadcrumb {
    font-size: 12px;
    height: 40px;
    line-height: 40px;
  }
  .search-filter {
    height: 330px;
    /* border: 1px solid red; */
    .filter-wrap {
      height: 329px;
      padding: 18px 0;
      box-sizing: border-box;
      /* border: 1px solid blue; */
      .filter-list {
        height: 293px;
        /* border: 1px solid yellsow; */
        ul {
          display: flex;
          height: 48px;
          padding: 0 60px 0 124px;
          /* border: 1px solid red; */
          text-align: center;
          position: relative;
          font-size: 14px;
          span {
            padding: 14px 0;
            top: 0;
            left: 0;
            color: #b0b0b0;
            position: absolute;
          }
          li {
            width: 148px;
            height: 48px;
            padding: 14px 0;
            box-sizing: border-box;
            /* border: 1px solid blue; */
          }
        }
      }
    }
  }
  .Search_main {
    padding: 10px 0 100px;
    .Search_complex {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      height: 30px;
      line-height: 30px;
      margin: 20px 0;
      .complex_left {
        display: flex;
        text-align: center;
        li {
          width: 105px;
          /* padding: 0,30px; */
          border-right: 1px solid #e0e0e0;
          /* border: 1px solid rgb(50, 211, 122); */
        }
      }
      .complex_right {
        display: flex;
        li {
          width: 105px;
        }
      }
    }
    .Search_item {
      display: flex;
      height: auto;
      flex-wrap: wrap;
      justify-content: space-around;
      .box-card {
        width: 284px;
        height: 383px;
        text-align: center;
        padding-top: 47px;
        margin: 0px 0px 14px 14px;
        .card_img {
          /* border: 1px solid red; */
          img {
            width: 200px;
            height: 200px;
            /* border: 1px solid blue; */
          }
          h2 {
            font-size: 14px;
            font-weight: normal;
          }
        }
        p {
          color: #ff6700;
        }
        .card_Thumbnail {
          /* border: 1px solid gold; */
          height: 40px;
          ul {
            height: 40px;
            display: flex;
            justify-content: center;
            li {
              height: 40px;
              margin: 15px 5px;
              border: 1px solid #e0e0e0;
              img {
                height: 40px;
              }
            }
          }
        }
      }
    }
    .Search_Pagina {
      width: 100%;
      height: 60px;
      padding: 15px 0;
      text-align: center;
      .Search_Pagination {
        height: 60px;
        width: 100%;
      }
    }
  }
  .Search_Guess {
    padding: 20px 0 100px 0;
    height: 520px;
    position: relative;
    box-sizing: border-box;
    .Search_Guess_title {
      height: 50px;
      border-top: 1px solid #e0e0e0;
      text-align: center;
      h2 {
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
        height: 40px;
        width: 480px;
        background-color: #f5f5f5;
        font-weight: normal;
        color: #757575;
      }
    }
  }
}
/* 底部轮播图 */
.el-carousel {
  height: 350px;
  /* border: 1px solid rgb(145, 245, 14); */
  .Search_Carousel {
    height: 300px;
    /* border: 2px solid rgb(27, 24, 240); */
    .Search_Carousel_card {
      /* border: 1px solid red; */
      width: 234px;
      display: flex;
      .Carousel_card_item {
        background-color: #ffffff;
        text-align: center;
        height: 300px;
        margin-right: 14px;
        img {
          width: 140px;
          height: 140px;
          margin: 40px 47px 20px 47px;
        }
        .card_item_title {
          height: 18px;
          margin: 0 10px 10px;
        }
        .card_item_money {
          height: 21px;
          color: #ff6700;
          margin-bottom: 10px;
        }
        .card_item_Praise {
          height: 21px;
        }
      }
    }
  }
}
/* .el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
} */
/* 分页器样式 */
::v-deep {
  .el-pagination.is-background .el-pager li:not(.disabled) {
    background-color: #f6f4ec; // 进行修改未选中背景和字体
    color: #b0b0b6;
    font-size: 18px;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #757575; // 进行修改选中项背景和字体
    color: #ffffff;
    font-size: 18px;
  }
}
</style>
